{% extends 'base.html' %}
{% load static %}
{% load i18n %}
{% load sizeformat %}
{% load services %}

{% block head %}
{% endblock %}
{% block title %}{% trans '创建云服务器' %}{% endblock %}

{% block body %}
    <div class="container-fluid">
        <div>
            <div class="bg-light p-2 mb-2">
                <span>{% trans '创建云服务器' %}</span>
            </div>
            <div>
                <form class="form-horizontal" id="id-form-server-create">
                    <div class="form-group row">
                        <label for="id-service" class="col-sm-2 text-right col-form-label">{% trans '服务单元' %}</label>
                        <div class="col-sm-7">
                            <select name="service_id" class="form-control" id="id-service">
                                {% get_services as services %}
                                {% for s in services %}
                                    <option value="{{ s.id }}" {% if s.id == service_id %}selected{% endif %}>
                                        {{ s.org_data_center__organization__name }} / {{ s.org_data_center__name }} / {{ s.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="id-azone" class="col-sm-2 text-right col-form-label">{% trans '可用区' %}</label>
                        <div class="col-sm-7">
                            <select name="azone_id" class="form-control" id="id-azone"></select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="id-network" class="col-sm-2 text-right col-form-label">{% trans '网络' %}</label>
                        <div class="col-sm-2">
                            <select class="form-control" id="id-network-tag">
                                <option value="0">{% trans '全部' %}</option>
                                <option value="1">{% trans '公网' %}</option>
                                <option value="2">{% trans '私网' %}</option>
                            </select>
                        </div>
                        <div class="col-sm-5">
                            <select name="network_id" class="form-control" id="id-network">
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="id-flavor" class="col-sm-2 text-right col-form-label">{% trans '配置' %}</label>
                        <div class="col-sm-7 form-inline">
                            <select name="flavor_id" class="form-control" id="id-flavor" required>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="id-image" class="col-sm-2 text-right col-form-label">{% trans '系统镜像' %}</label>
                        <div class="col-sm-7">
                            <select name="image_id" class="form-control" id="id-image" required>
                                <option value="">--</option>
                                {% for i in images %}
                                    <option value="{{ i.id }}">{{ i.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="id-pay-type" class="col-sm-2 text-right col-form-label">{% trans '付费方式' %}</label>
                        <div class="col-sm-7">
                            <select name="pay_type" class="form-control" id="id-pay-type">
                                <option value="prepaid">{% trans '包年包月' %}</option>
                                <option value="postpaid">{% trans '按量付费' %}</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="id-period" class="col-sm-2 text-right col-form-label">{% trans '订购时长' %}</label>
                        <div class="col-sm-7 input-group">
                            <input name="period" type="text" class="form-control"
                                   onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" aria-label="RAM">
                            <div class="input-group-append">
                                <span class="input-group-text">{% trans '月' %}</span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="id-remarks" class="col-sm-2 text-right col-form-label">{% trans '备注' %}</label>
                        <div class="col-sm-7">
                            <input name="remarks" type="text" class="form-control" id="id-remarks">
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-2">
                            <button type="submit" class="btn btn-primary float-right">{% trans '创建' %}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}

{% block base-script %}
    <script type="text/javascript" src="{% static 'zhongkun/common.js' %}"></script>
    <script type="text/javascript" src="{% static 'servers/create.js' %}"></script>
{% endblock %}
